<template>
  <view
    class="navBar flex_row flex_center"
    :style="{ paddingTop: `${statusBarHeight}px`, background: `${bgColor}` }"
  >
    <view class="backIcon" @click="back" v-if="!backHide">
      <view class="icon" :style="{ borderColor: `${color}` }"></view>
    </view>
    <text class="title" :style="{ color: `${color}` }">{{ title }}</text>

    <view class="right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  bgColor: {
    type: String,
    default: "#fff",
  },
  color: {
    type: String,
    default: "#333",
  },
  backHide: {
    type: Boolean,
    default: false,
  },
});
const { title } = toRefs(props);

const res = uni.getSystemInfoSync();
const statusBarHeight = ref(res.statusBarHeight);

const emits = defineEmits(["back"]);

const back = () => {
  emits("back");
};
</script>
<style lang="scss" scoped>
.navBar {
  width: 100vw;
  height: 44px;
  background: #fff;
  z-index: 99;
  position: relative;
  display: flex;
  box-sizing: content-box;
}

.title {
  z-index: 1;
  font-weight: bold;
  font-size: 30rpx;
}

.backIcon {
  position: absolute;
  z-index: 3;
  left: 30rpx;
  height: 100%;
  width: 60rpx;
  display: flex;
  align-items: center;
}

.backIcon .icon {
  width: 16rpx;
  height: 16rpx;
  border-style: solid;
  margin-top: 8rpx;
  border-width: 4rpx 4rpx 0 0;
  border-color: #333;
  transform-origin: 75% 25%;
  transform: rotateZ(-135deg);
  transition: 100ms ease-in 0.1s;
}

.right{
  position: absolute;
  right: 30rpx;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
